<template>
<!--pages/discover/hoicenessCategoryList.wxml-->
<view class="container">
<view>
  <!-- <view class="itemTitle">
    <view class="categoryName">
      <view>{{name}}</view>
    </view>
  </view> -->

  <view class="itemList">
    <view v-for="(item, index) in mediaList" :key="index" :class="(index % 2 == 0 ? 'mgR':'') + ' itemMain'">
      <view>
        <view v-if="type == 1">
          <!-- 视频 -->
          <view class="childItem" @click="videoPlay(index,mediaList,item)" :data-index="index" :data-srcList="mediaList" :data-id="item">
           <image mode="aspectFit" style="width:100%;height:100%" :src="item+ '?x-oss-process=video/snapshot,t_0,f_jpg'" ></image>
           
			<view class="play">
              <image style="width:100%;height:100%" src="/static/images/play.png"></image>
            </view>
          </view>
        </view>
        <view v-else>
          <!-- 图片 -->
          <view class="childItem" :data-src="childItem" :data-srcList="item.resultArr" @click="imgYu(item,mediaList)">
            <u-image mode="aspectFit"  width="100%" height="312rpx" use-error-slot use-loading-slot :src="item">
            </u-image>
          </view>
        </view>
      </view>
    </view>
  </view>

</view>
</view>
</template>

<script>
// pages/discover/choicenessCategoryList/mediaList/mediaList.js
const app = getApp();
const util = require("../../../../utils/util.js");
const network = require("../../../../manager/network-manager.js");
const dialog = require("../../../../utils/dialog.js");

export default {
  data() {
    return {
      pagination: {
        loadMore: true,
        page: 1,
        totalPage: 1,
        limit: 20,
        length: 100
      },
      uuid: '',
      type: '',
      name: '',
      uuid: '',
      controls: false,
      mediaList: []
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options, 'options');
    const uuid = options.uuid;
    const type = options.type;
    const name = options.name;
    uni.setNavigationBarTitle({
      title: name
    });
    this.setData({
      uuid: uuid,
      type: type,
      name: name
    });
    this.getMediaList(options.uuid);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */

  /**
   * 页面上拉触底事件的处理函数
   */
  onPullDownRefresh() {
    this.reloadData();
  },

  onReachBottom: function () {
    if (this.pagination.loadMore) {
      this.loadMediaData(false);
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
	  setData(data) {
	  	for (let i in data) {
	  		this[i] = data[i]
	  	}
	  },
    reloadData: function () {
      this.getMediaList(true);
    },
    loadMediaData: function (isRefresh) {
      var that = this; //刷新页面配置

      if (isRefresh) {
        that.pagination.page = 1;
        that.pagination.totalPage = 1;
      } else {
        that.pagination.page += 1;
      }

      that.setData({
        pagination: that.pagination
      });
      this.getMediaList(isRefresh);
    },

    videoPlay(index,srclist,item) {
      console.log( 'event'); // return
    
      var that = this;
      // var index = event.currentTarget.dataset.index; //获取data-src
    
      // var vdoList = event.currentTarget.dataset.srclist; //获取data-list
    
      console.log(srclist);
      var sourcesList = [];
    
      for (let i in srclist) {
        var obj = {
          'type': 'video',
          'url': srclist[i]
        };
        sourcesList.push(obj);
      } //图片预览
    
    	
      uni.navigateTo({
      	url:`/pages/discover/choicenessCategoryList/videoDetail/videoDetail?src=${item}`
      })
      
      // uni.previewMedia({
      //   sources: sourcesList,
      //   current: index,
      //   // 当前显示图片的http链接
      //   showmenu: true // 需要预览的图片http链接列表,
    
      // });
    },

    imgYu: function (src,srclist) {
    
      var that = this;

      //图片预览

      uni.previewImage({
        current: src,
        urls: srclist
      });
    },

    getMediaList(isRefresh) {
      var that = this;
      var uri = app.globalData.config.interfaces.URL_CHOICEENESSCATEGORY_MEDIA;
      var params = {
        "pageNum": that.pagination.page,
        "pageSize": that.pagination.limit,
        "categoryId": that.uuid
      };
      network.get(uri, params, 'form').then(res => {
        uni.stopPullDownRefresh();

        if (res.code == 200) {
          var _list = res.data.list;
          var pagination = that.pagination;

          if (isRefresh) {
            pagination.totalPage = res.data.totalPage;
            pagination.length = res.data.total;
            that.setData({
              pagination: pagination,
              mediaList: _list ? _list : []
            });
          } else {
            if (_list && _list.length > 0) {
              that.setData({
                mediaList: [...that.mediaList, ..._list]
              });
            }
          }

          var loadMore = true;

          if (pagination.page == pagination.totalPage) {
            loadMore = false;
          } else {
            loadMore = true;
          }

          that.setData({
            "pagination.loadMore": loadMore
          }); // 123123123123
        } else {
		  uni.showToast({
		  	title: res.message,
		  	duration: 3000,
		  	icon: 'none'
		  })
        }
      }).catch(res => {
        uni.stopPullDownRefresh();
        console.error(res);
		uni.showToast({
			title: res.errMsg,
			duration: 3000,
			icon: 'none'
		})
      });
    }

  }
};
</script>
<style>
@import "./mediaList.css";
</style>